<!--  -->
<template>
  <div id="customer" 
    @dragover.prevent="handleDragOver"
    @drop.prevent="handleDrop">
    <div class="customer-info" v-if="userInfo">
      <div class="customer-user-box">
        <div class="customer-user flex">
          <div class="customer-user-img" >
            <img :src="userInfo.avatar" />
          </div>
          <div class="customer-user-right" >
            <div class="realse-name flex-a-c">
              <div class="user-right-name" v-if="userInfo.nickname">{{ userInfo.nickname }}</div>
              <div class="user-right-id" v-if="userInfo.uid">ID:{{ userInfo.uid }}</div>
            </div>
            <div class="flex" v-if="userInfo.level_name">
              <div class="user-level-name flex">
                <img src="../../../assets/images/member/level-icon.png" /><span>{{ userInfo.level_name }}</span>
              </div>
            </div>
            <div class="customer-user-phone flex-a-c" v-if="userInfo.mobile">
              <p>
                电话号码：<span @click="callPhone(userInfo.mobile)">{{ userInfo.mobile }}</span
                ><span class="iconfont icon-zx_map_tel"  @click="callPhone(userInfo.mobile)"></span>
              <span  v-clipboard:copy="userInfo.mobile " v-clipboard:success="onCopy" style="color: #de5a55; margin-left: 1rem;">复制</span>
              </p>
            </div>
          </div>
        </div>
        <div class="customer-label" v-if="userInfo.tag">
          <div class="customer-label-list flex" :class="[labeLClass?'tag-more':'',labeLMore?'tag-height':'']" ref="labelList">
            <block v-for="(item, index) in userInfo.tag" :key="index">
              <div class="label-item flex-a-c flex-j-c">{{ item.name }}</div>
            </block>
          </div>
          <span v-show="labeLMore" @click="tagsMoreOn" class="view-more ">{{labeLClass?'收起折叠':'查看更多'}}<span class="iconfont icon-course_goon" :class="[labeLClass?'overturn':'']"></span></span>
        </div>
      </div>
    </div>



    <div class="customer-tab">
      <van-tabs v-model="active" title-active-color="#F14E4E" @click="activeOn">
        <van-tab title="客户动态" :name="0">
          <div class="chown" >
            <div>所属成员：{{member_name || '无'}}</div>
            <div style="display: flex; align-items: center;">
            <template v-if="member_name && has_owned">
              <van-button @click="handle_member('assignment')" color="#DE5A55" class="buttons mr8"  size="small">转让</van-button>
              <van-button color="#DE5A55" class="buttons mr8" @click="handle_member('share')"  size="small">共享</van-button>
              <van-button color="#fff"  @click="handle_member('waive')" class="buttons waive" size="small">放弃</van-button>
            </template>
            <template v-if="!member_name && recover_day == -2">
              <div style="display: flex; align-items: center;">
                <van-button color="#DE5A55"  @click="handle_member('receive')" class="buttons  mr8" size="small">领取</van-button>
                <van-button color="#DE5A55"  @click="handle_member('allot')" class="buttons " size="small">分配</van-button>
              </div>
            </template>
            </div>
          </div>
          <div class="client-area">
            <el-input type="textarea" :rows="3" placeholder="添加跟进记录，1000字以内" v-model="form.content" maxlength="1000" show-word-limit></el-input>
            <div class="area-footer  flex-j-sb">
              <div class="area-left">
                <!--:before-read="advanceMethod"-->
                <van-uploader :after-read="multipleMethod" v-model="fileList" multiple :max-count="9" @delete="fileDelete">
                  <div class="flex-a-c">
                    <i class="el-icon-paperclip upload-text"></i>
                    <span class="upload-text">附件 {{ fileList.length }}/9</span>
                  </div>
                </van-uploader>
              </div>
              <div class="area-right ">
                <div class="client-add" @click="clientAdd">发表</div>
              </div>
            </div>
          </div>

          <div class="record">
            <div class="record-tabs" id="record-tabs">
              <van-tabs v-model="recordActive" title-active-color="#F14E4E" @click="onClientChange">
                <block v-for="(item, index) in recordList" :key="index">
                  <van-tab :title="item.text" :name="item.value">
                    <div class="record-content" v-if="Object.values(customerList).length > 0">
                      <block v-for="(recordItem, recordKey, recordIndex) in customerList" :key="recordIndex">
                        <div class="record-time">
                          <h3>{{ recordKey }}</h3>
                          <block v-for="(timeItem, timeIndex) in recordItem" :key="timeIndex">
                            <div class="record-list">
                              <div class="time-head flex-a-c">
                                <div class="time-head-left">
                                  <div class="time-icon">
                                    <i class="iconfont icon-fontclass-jilu3 flex-a-c flex-j-c" :class="typeMapper(timeItem.type, 'iconClass')"></i>
                                  </div>
                                </div>
                                <div class="time-head-right flex-a-c flex-j-sb">
                                  <div class="time-title">{{ typeMapper(timeItem.type, "title") }}</div>
                                  <div class="get-time">{{ timeItem.created_at }}</div>
                                </div>
                              </div>
                              <div class="time-content flex">
                                <div class="timeline-left flex-a-c flex-j-c">
                                  <div class="timeline"></div>
                                </div>
                                <div class="timeline-right ">
                                  <div class="flex-a-c flex-j-sb">
                                    <div class="timeline-phone">
                                      {{ timeItem.show_title[0] }} <span>{{ timeItem.show_title[1] }}</span> {{ timeItem.show_title[2] }}
                                    </div>
                                    <div class="timeline-update" v-if="timeItem.type == 1 || timeItem.type == 2 " @click="updateRecord(timeItem.id, timeItem.content)">
                                      <i class="iconfont icon-fontclass-qianshu"></i>
                                    </div>
                                  </div>
                                  <div class="record-mian">
                                    <block v-for="(contentItem, contentKey, contentIndex) in timeItem.show_content" :key="contentIndex">
                                      <div class="record-msg" v-if="contentItem">
                                        <span class="msg-title" v-if="contentKey !== 'default'">{{ contentKey }}</span>
                                        <span>{{ contentItem }}</span>
                                      </div>
                                    </block>
                                    <div class="accessory-list flex" v-if="timeItem.file_info.length > 0">
                                      <p>附件</p>
                                      <block v-for="(imgItem, imgIndex) in timeItem.file_info" :key="imgIndex">
                                        <div class="flex-a-c accessory-img" v-if="imgItem.format === 'png' || imgItem.format === 'jpg' || imgItem.format === 'png' || imgItem.format === 'jpeg'">
                                          <img :src="imgItem.url" @click.stop="lookImg(imgItem.url)" />
                                          <span class="iconfont icon-adsystem_icon_cancle" @click="clientDelete(timeItem.id, timeItem.file_info, imgIndex)"></span>
                                        </div>
                                        <div class="accessory-file flex-a-c" v-else>
                                          <img v-if="['doc', 'docx'].includes(imgItem.format)" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customer/word.png" alt="" />
                                          <img
                                            v-else-if="['xls', 'xlsx'].includes(imgItem.format)"
                                            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customer/excel.png"
                                            alt=""
                                          />
                                          <img
                                            v-else-if="['mp4', 'avi', 'mov', 'rmvb', 'rm', 'flv', '3gp'].includes(imgItem.format)"
                                            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customer/video.png"
                                            alt=""
                                          />
                                          <img
                                            v-else-if="['cda', 'wav', 'mp3', 'wmv', 'flac', 'aac'].includes(imgItem.format)"
                                            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customer/audio.png"
                                            alt=""
                                          />
                                          <img v-else src=" https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/customer/unknown_file.png" alt="" />
                                          <span class="name">{{ imgItem.name }}</span>
                                          <i class="el-icon-download" @click.stop="clientDownload(timeItem.file_info, imgIndex)"></i>
                                          <span class="iconfont icon-adsystem_icon_cancle" @click="clientDelete(timeItem.id, timeItem.file_info, imgIndex)"></span>
                                        </div>
                                      </block>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </block>
                        </div>
                      </block>
                    </div>
                    <browse-list :browselists="browselists" v-else-if="browselists.length > 0"></browse-list>
                    <van-empty description="描述文字" v-else />
                  </van-tab>
                </block>
              </van-tabs>
            </div>
            <!--电话号码 <span>15536254456</span>-->
          </div>
        </van-tab>
        <van-tab title="客户商机" :name="3">
          <template v-if="!show_details_page">
            <div  class="business-box">
              <span class="span" @click="show_picker('status')">{{business_status_name||'商机状态'}}<van-icon name="arrow-down" /></span>
              <span class="span" @click="show_picker('type')">{{business_type_name||'商机类型'}}<van-icon name="arrow-down" /></span>
              <input type="text" v-model="business_form.staff" placeholder="创建人"/>
            </div>
            <div class="business-box2">
              <input type="text" v-model="business_form.name" placeholder="商机名称">
              <div style="display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0;">
                <button class="search-button" @click="search_handle">搜索</button>
                <button class="new-button" @click="add_business">新建</button>
              </div>
            </div>
            <div style="padding-bottom: 6.25rem;">
              <div style="text-align: left; margin-left: 0.75rem; margin-top: 1rem;">商机数量（{{business_list.length}}）</div>
              <div class="business-box3">
                <div class="business-item" v-for="item in business_list" :key="item.id">
                  <div  class="flex" style="justify-content: space-between; padding: 0 0.75rem 0.625rem; border-bottom: 1px solid #ccc;">
                    <span class="">商机名称：{{item.name}}</span>
                    <span style="font-size: 0.75rem;" @click="show_detais(item)">查看详情<van-icon name="arrow" /></span>
                  </div>
                  <div  class="flex" style="padding: 0.75rem 0.53rem   0.75rem; border-bottom: 1px solid #ccc; text-align: left;">
                    <span style="width: 50%;">商机状态：{{item.has_one_status.name}}</span>
                    <span style="width: 50%;">商机类型：{{item.has_one_type.name}}</span>
                  </div>
                  <div  class="flex" style="padding: 0.75rem 0.53rem 0; text-align: left;">
                    <span style="width: 50%;">创建人：{{item.has_one_staff.name}}</span>
                    <span style="flex: 1; font-size: 0.75rem;">创建时间：{{item.created_at}}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div style="background: #fff;">

            <div class="add-business">
              <div class="flex center" style="margin: 0.8125rem 0;" v-if="opportunity_id">
                <span style="margin-right: 1rem;">创建人：</span>
                <span>{{ create_name }}</span>
              </div>
              <div class="flex center">
                <span class="mr-24">商机名称</span>
                <input type="text" placeholder="请输入" v-model="business_form.name">
              </div>
              <div class="flex center" style="margin: 0.8125rem 0;">
                <span class="mr-24">商机状态</span>
                <div class="relative" @click="show_picker('status')">
                  <input type="text" disabled :placeholder="business_status_name||'请选择商机状态'" >
                  <van-icon name="arrow" />
                </div>
              </div>
              <div class="flex center">
                <span class="mr-24">商机类型</span>
                <div class="relative" @click="show_picker('type')">
                  <input type="text" disabled  :placeholder="business_type_name||'请选择商机类型'" >
                  <van-icon name="arrow" />
                </div>
              </div>
            </div>
            <div class="details" >
                <van-field
                  v-model="business_form.details"
                  rows="3"
                  autosize
                  label="商机详情"
                  type="textarea"
                  maxlength="1000"
                  placeholder="请输入"
                  show-word-limit
                />
                <template v-if="files_list && files_list.length!==0">
                  <p style="text-align: left; margin-bottom: 0.625rem; margin-top: 1.5rem;">附件：</p>
                  <div class="file-list">
                    <template v-for="(item,index) in files_list" >
                      <div class="item-box" :key="item.id"  v-if="checkImageType(item.file_name,'image')">
                            <img :src="item.file_url" style="width: 100%; height: 100%;" />
                            <div class="close" @click="clientDelete(item.id, item, index,'business')"><van-icon name="cross" /></div>
                      </div>
                    </template>
                  </div>
                  <div  class="details-files-box" v-if="show_files_flag">
                    <template v-for="(item,index) in files_list" >
                      <div :key="item.id" v-if="checkImageType(item.file_name,'file')" style="display: flex; align-items: center; justify-content: space-between;">
                          <div class="file-name" style="width: 17rem; overflow-x: scroll; white-space: nowrap;">{{file_sore_handle(item.file_name)}} 、 {{ item.file_name }}</div>
                          <div style="flex-shrink: 0; margin-left: 1.25rem;">
                            <img  style="cursor: pointer; margin-right: 0.625rem;" :src="require('../../../assets/images/customer_delete.png')" @click="clientDelete(item.id, item, index,'business')"/>
                            <img style="cursor: pointer;" :src="require('../../../assets/images/customer_folder-download.png')"  @click.stop="clientDownload(item, index,'business')" />
                          </div>
                      </div>
                    </template>
                  </div>
                  <van-uploader style="width: 100%; margin-left: 0.625rem;" v-if="files_list.length<9" :after-read="multipleMethod" accept="*" >
                    <div class="flex-a-c">
                      <span class="upload-text"><span style="color: #e80d2a; cursor: pointer;">上传文件</span> {{ files_list.length }}/9</span>
                    </div>
                  </van-uploader>
                </template>
                <div v-else>
                    <p style="text-align: left; margin-left: 0.5625rem; margin-bottom: 1.25rem;">附件：</p>
                    <div>
                      <van-uploader :after-read="multipleMethod" accept="*"  >
                        <div  style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
                          <div>
                            <img :src="require('../../../assets/images/ht_btn_editsend_(2).png')" alt="">
                          </div>
                          <span style="color: #999;"><span style="color: #e80d2a;">点击上传文件</span> {{ files_list.length }}/9</span>
                        </div>
                      </van-uploader>
                    </div>
                </div>
            </div>

            <div style="display: flex; justify-content: space-around; padding: 0 0.75rem 0.75rem; font-size: 1rem; align-items: center;">
              <span @click="go_back"  style="width: 3.5rem; color: #999;">返回</span>
              <span @click="submit_handle" style="flex: 1; height: 2.125rem; line-height: 2.125rem; background: #fa4b50; border-radius: 0.25rem; color: #fff;">保存</span>
            </div>
          </div>
          </template>
        </van-tab>
        <van-tab title="客户关系" :name="2">
          <div class="other-member">其他归属成员</div>
          <div class="other-member-box" v-for="item in otherMemberList" :key="item.uid">
            <img :src="item.has_one_employee&&item.has_one_employee.avatar" alt=""/>
            <div class="other-member-right">
              <div class="text-left">{{item.has_one_employee&&item.has_one_employee.name}}</div>
              <div class="text-left">{{item.has_one_employee&&item.has_one_employee.mobile}}</div>
            </div>
          </div>
          <div class="other-member">客户群</div>
          <div class="group-box">
              <div class="group-box-item" v-for="item in customer_base">
                  <div class="flex-between">
                    <span>{{item.group_name}}（{{item.group_member_count}}人）</span>
                    <span>群主：{{item.has_one_owner.name}}</span>
                  </div>
                  <div class="flex-between mt10">
                    <div class="flex-column">
                      <span>创建时间：{{item.created_at}}</span>
                      <span>加入时间：{{item.group_one_member[0].created_at}}</span>
                    </div>
                    <span class="into" @click="into_group_chat(item.chat_id)">进入群聊</span>
                  </div>
              </div>
          </div>
        </van-tab>
        <van-tab title="客户详情" :name="1">
          <div class="client-details">
            <div class="flex-a-c client-name">
              <span><span class="iconfont icon-fontclass-xinghao"></span>客户名称</span>
              <van-field v-model="clientForm.name" placeholder="请输入客户名称" input-align="right" @input="clientChange" />
            </div>
            <div class="flex-a-c client-name">
              <span><span class="iconfont icon-fontclass-xinghao"></span>客户电话</span>
              <van-field v-model="clientForm.mobile" placeholder="请输入客户电话" input-align="right" @input="clientChange" />
            </div>
            <van-cell title="客户进展" is-link :value="clientShow.progress_name || '请选择客户进展'" :border="true" @click.stop="showEvolve = true" />
            <van-cell title="客户来源" is-link :value="clientShow.source_name || '请选择客户来源'" :border="true" @click.stop="showSource = true" />
            <van-cell title="客户行业" is-link :value="clientShow.industry_name || '请选择客户行业'" :border="true" @click.stop="showAccessory = true" />
            <van-cell title="所属部门" is-link :value="clientShow.classifyName || '请选择所属部门'" :border="true" @click.stop="departmentPopup" />
            <van-cell title="所属区域" is-link :value="clientShow.addressName || '请选择所在区域'" :border="true" @click.stop="addressShow = true" />
            <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
            <div class="client-btn" @click.stop="saveCustomer">提交</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>



    <van-popup
      v-model="show_member"
      closeable
      round
      :style="{ height: '60%' }"
      close-icon="close"
      position="bottom"
    >
      <p style="padding: 1.5rem 0 0.9375rem; text-align: center;">请选择成员</p>
      <div class="line"></div>
      <van-search
        v-model="keywork"
        show-action
        shape="round"
        :clearable="false"
        placeholder="请输入成员姓名/手机号"
      >
      <template #right-icon v-if="keywork"  >
        <van-icon name="close" @click="onCancle"/>
      </template>
      <template #action>
        <div class="search-btn" @click="onSearch">搜索</div>
      </template>
      </van-search>
      <div style="padding: 1rem; overflow-y: scroll; height: calc(100% - 20%);"    ref="memberRef">
        <div @click="choose(item.id)" style="text-align: left; font-size: 1rem; margin-top: 0.5rem;" v-for="item in member_list" :key="item.id">{{item.name}}</div>
      </div>
    </van-popup>

    <!--@close="accessoryClick"-->
    <van-popup v-model="accessoryShow" class="accessory-popup" position="center">
      <div class="accessory" :style="{ 'background-image': 'url(' + lookImgItem + ')' }"></div>
    </van-popup>

    <div class="accessory-down" v-if="accessoryShow" @click="accessoryClick">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/poster-down.png" />
    </div>
    <!--修改跟进记录 -->
    <follow-popup :followUpShow="followUpShow" :followUpData="form.content" @cancelFollow="cancelFollow" @updateConfirm="updateConfirm"></follow-popup>

    <client-picker :showPopup="showSource" typeName="source_id" valuekey="source_name" :pickerList="sourceList" :index="sourceIndex" clientTitle="客户来源" @pickerCancel="cancelClick" @pickerConfirm="pickerConfirm">
    </client-picker>

    <client-picker
      :showPopup="showAccessory"
      typeName="industry_id"
      valuekey="industry_name"
      :pickerList="industryList"
      :index="industryIndex"
      clientTitle="客户行业"
      @pickerCancel="cancelClick"
      @pickerConfirm="pickerConfirm"
    >
    </client-picker>
    <client-picker
      :showPopup="showEvolve"
      typeName="progress_id"
      valuekey="progress_name"
      :index="progressIndex"
      :pickerList="progressList"
      clientTitle="客户进展"
      @pickerCancel="cancelClick"
      @pickerConfirm="pickerConfirm">
    </client-picker>
    <van-popup v-model="departmentShow" position="bottom" round>
      <div class="department-main">
        <div class="head flex-a-c flex-j-sb">
          <div class="cancel" @click.stop="divisionCancel">取消</div>
          <div class="department-title">请选择所属部门</div>
          <div class="affirm" @click.stop="divisionAffirm">确认</div>
        </div>

        <div class="content">
          <block v-for="(item, index) in departmentArr" :key="index" class="content-time-stair flex-a-c flex-j-sb">
            <div class="time-stair flex-a-c flex-j-sb" @click.stop="departmentArrOn(index, item)">
              <div class="time-left flex-a-c flex-j-sb">
                <div class="time-icon"></div>
                <p>{{ item.text }}</p>
              </div>
              <div class="iconfont icon-member-bottom"></div>
            </div>
          </block>

          <div class="content-time select flex-a-c flex-j-sb">
            <div class="time-left flex-a-c">
              <div class="time-icon"></div>
              <p>请选择部门</p>
            </div>
            <div class="iconfont icon-member-top"></div>
          </div>
        </div>

        <div class="department-children">
          <div class="department-title">选择所属子部门</div>
          <div class="children-main" v-if="divisionList.length > 0">
            <block v-for="(item, index) in divisionList" :key="index">
              <div class="children-item flex-j-sb" :class="divisionIndex === index ? 'on' : ''" @click.stop="departmentOn(item, index)">
                <div>{{ item.text }}</div>
                <div class="iconfont  icon-info-tick" v-if="divisionIndex === index"></div>
              </div>
            </block>
          </div>
          <van-empty description="暂无数据" v-else />
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show_business_status" position="bottom" round>
      <van-picker
        title="商机状态"
        show-toolbar
        :columns="business_columns_status"
        @confirm="onConfirmStatus"
        @cancel="show_business_status = false"
      />
    </van-popup>
    <van-popup v-model="show_business_type" position="bottom" round>
      <van-picker
        title="商机类型"
        show-toolbar
        :columns="business_columns_type"
        @confirm="onConfirmType"
        @cancel="show_business_type = false"
      />
    </van-popup>


  </div>
</template>
<script>
import customer_controller from "../customerManagement/customer_controller";
export default customer_controller;
</script>
<style scoped lang="scss">
.other-member{
  text-align: left;
  margin: 0.75rem;
}
.other-member-box{
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 0.4375rem 1.0625rem 0.4375rem 0.75rem;
  margin:0.3125rem 0.9375rem;
  .other-member-right{
    margin-left:0.4688rem
  }
  img{
    margin: 0;
    width:2.75rem;
    height: 2.75rem;
    border-radius: 0.3125rem;
  }
  .text-left{
    text-align: left;
    font-weight: 500;
  }
}
.group-box {
  padding: 0.625rem;

  .mt10 {
    margin-top: 0.625rem;
  }

  .into {
    background: #de5a55;
    color: #fff;
    border-radius: 0.3125rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .group-box-item {
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.875rem 1.0625rem 0.4375rem 0.75rem;
    margin-bottom: 0.25rem;
  }
}

#customer .chown .waive {
  color: #de5a55 !important;
  border: 1px solid #de5a55 !important;
}

#customer .chown .buttons {
  width: 3.4375rem;
  height: 1.5rem;
  border-radius: 0.25rem;
}

#customer .chown .mr8 {
  margin-right: 0.5rem;
}

#customer .chown {
  background: #fff;
  height: 3.1875rem;
  line-height: 3.1875rem;
  display: flex;
  justify-content: space-between;
  padding: 0 1.25rem;
  margin: 0.625rem 0;
}

.line {
  width: 100%;
  height: 1px;
  background: #bbb;
}

#customer .search-btn {
  width: 5rem;
  height: 1.875rem;
  border-radius: 0.25rem;
  background-color: rgba(222, 90, 85, 1);
  color: rgba(255, 255, 255, 1);
}

.children-main::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

#appMain.pcStyle .accessory-popup {
  width: 16.5625rem !important;
  left: 50%;
  border-radius: 0.3125rem;
}

#appMain.pcStyle .accessory-down {
  bottom: 15.125rem;
}

.customer-tab ::v-deep .van-tab--active .van-tab__text {
  font-size: 0.875rem;
  font-weight: bold;
}

.customer-tab ::v-deep .record .van-tab__text {
  font-size: 0.75rem;
  line-height: 0.75rem;
}

.customer-tab ::v-deep .record .van-tabs {
  padding-bottom: 0.5rem;
}

.client-details ::v-deep .van-cell__title {
  text-align: left;
  font-size: 0.875rem;
  line-height: 0.875rem;
  color: #333;
}

.client-details ::v-deep .van-cell::after {
  border-bottom: none;
}

.client-details ::v-deep .van-picker__cancel {
  color: #aaaab3;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

#customer ::v-deep .van-picker__title {
  line-height: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #3b3b4a;
}

.customer-tab .business-box {
  display: flex;
  padding: 0.5rem;
}

.customer-tab .business-box2 {
  display: flex;
  padding: 0.5rem;
  align-items: center;
}

.customer-tab .business-box2 input {
  width: 9.5rem;
  // flex:1;
  padding: 0.375rem 0.9375rem;
  border: none;
  border-radius: 0.25rem;
  background: #fff;
}

.customer-tab .business-box2 .search-button {
  width: 4.375rem;
  height: 2rem;
  border: none;
  color: #fff;
  background: #f15353;
  border-radius: 0.25rem;
  margin-left: 1.125rem;
}

.details ::v-deep .van-cell {
  padding: 0 0.5rem  0  0;
}

.details ::v-deep .van-field__body {
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  padding: 6px 8px;
}

.details ::v-deep .van-field__label {
  width: unset;
}

.item-box .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 0 12px;
}

.item-box .close ::v-deep .van-icon {
  position: absolute;
  top: -2px;
  right: -2px;
  color: #fff;
  font-size: 16px;
  transform: scale(0.5);
}

.customer-tab .details {
  background: #fff;
  padding: 0  0.75rem 1rem 0.5625rem;

  .file-list {
    display: flex;
    flex-wrap: wrap;
  }

  .item-box {
    position: relative;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 0.25rem;
    margin-right: 0.625rem;
  }

  .details-files-box {
    text-align: left;
    margin-left: 0.625rem;
    margin-top: 0.6rem;
    margin-bottom: 0.3125rem;
    background: #f6f6f6;
    padding: 0.625rem;

    .file-name::-webkit-scrollbar {
      display: none;
    }
  }
}

.customer-tab .add-business {
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1rem 0.5625rem;
  text-align: left;

  .relative {
    position: relative;
  }

  i {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
  }

  .center {
    align-items: center;
  }

  .mr-24 {
    margin-right: 0.75rem;
  }

  input {
    border: 1px solid #bbb;
    border-radius: 0.3125rem;
    height: 2rem;
    padding-left: 0.6875rem;
  }
}

.customer-tab .business-box2 .new-button {
  width: 4.375rem;
  height: 2rem;
  color: #f15353;
  background: #fff;
  border: 1px solid #f15353;
  border-radius: 0.25rem;
  margin-left: 1.0625rem;
}

.customer-tab .business-box input,
.span {
  position: relative;
  text-align: left;
  color: #686868;
  border: none;
  width: 7.25rem;
  background: #fff;
  border-radius: 0.25rem;
  margin-right: 0.3125rem;
  padding: 0.375rem 0.9375rem;
  white-space: nowrap;
}

.customer-tab .business-box .van-icon {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.customer-tab .business-box3 {
  display: flex;
  flex-direction: column;
}

.customer-tab .business-box3 .business-item {
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.875rem;
  padding: 0.625rem 0;
}

/* .customer-tab .business-box3 .business-item  */
.area-footer ::v-deep .el-upload {
  display: block;
}

.area-footer ::v-deep .el-upload-list {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.client-details .van-field {
  padding: 0.625rem 1.25rem 0.625rem 0;
}

.department-main .content-time:last-child .time-left .time-icon {
  border: 0.0625rem solid #f14e4e;
  background-color: transparent;
}

.department-main .content-time:last-child::after {
  width: 0;
  height: 0;
}

.van-cascader ::v-deep .van-cascader__title {
  width: 100%;
}

#customer {
  position: relative;
}
</style>
<style lang="scss" scoped>
.customer-info {
  background: #3b3b3b;

  .customer-user-box {
    padding: 1rem 0.9375rem 0 0.9375rem;

    .customer-user {
      position: relative;

      .customer-user-img {
        width: 3.75rem;
        height: 3.75rem;
        background: #000;
        border-radius: 50%;

        img {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 50%;
        }
      }

      .customer-user-right {
        margin-left: 0.875rem;

        .user-right-id {
          font-size: 0.6875rem;
          font-weight: 400;
          color: #fff;
          line-height: 0.6875rem;
          padding: 0.25rem 0.3125rem;
          border-radius: 0.125rem;
          background: #f34f47;
          margin-left: 0.8125rem;
        }

        .user-level-name {
          margin-top: 0.9375rem;
          padding: 0.125rem 0.6875rem 0.1875rem 1.1875rem;
          background: linear-gradient(90deg, #ffebc0, #ffc479);
          border-radius: 0.5rem;
          position: relative;

          img {
            width: 1.1875rem;
            height: 1.0625rem;
            position: absolute;
            left: 0;
            top: -0.125rem;
          }

          span {
            font-size: 0.625rem;
            color: #6c2a09;
            line-height: 0.625rem;
            margin-left: 0.1875rem;
          }
        }

        .customer-user-phone {
          margin: 0.75rem 0 0.9375rem 0;

          .icon-zx_map_tel {
            padding: 0 0 0 0.375rem;
            font-size: 0.625rem;
            line-height: 0.625rem;
          }

          p {
            font-size: 0.6875rem;
            line-height: 0.6875rem;
            color: #e8e8e8;

            span {
              color: #f34f47;
            }
          }
        }
      }

      .realse-name {
        .user-right-name {
          font-size: 1.4375rem;
          font-weight: 500;
          color: #fff;
          line-height: 1.4375rem;
          text-align: left;
        }
      }

      &::before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.0625rem;
        border-bottom: 0.0625rem solid #6f6f6f;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }

    .customer-label {
      position: relative;
      padding:0 0 0.625rem 0;
      .customer-label-list {
        height: auto;
        margin: 0.75rem 0 0 0;
        padding-bottom: 0.4375rem;
        flex-wrap: wrap;
        position: relative;
        padding:0 2.1875rem 0 0;
        .label-item {
          text-align: center;
          min-width: 3.75rem;
          box-sizing: border-box;
          border: 0.0625rem solid #f78b00;
          border-radius: 0.125rem;
          font-size: 0.6875rem;
          line-height: 0.6875rem;
          color: #f78b00;
          padding: 0.3125rem 0.4375rem 0.3125rem 0.4375rem;
          margin: 0 0.4375rem 0.625rem 0;

          &:nth-child(5) {
            margin: 0 0 0.625rem 0;
          }
        }
      }
      .view-more {
        font-size: 13px;
        color:#f14e4e;
        cursor: pointer;
        padding:0 0 0 3px;
        position: absolute;
        bottom: 0.625rem;
        right:0;
        .icon-course_goon {
          font-size: 13px;
          display: inline-block;
          transform: rotate(0deg);
          transition: 0.5s;

        }
        .overturn {
          transform: rotate(90deg);
          transition: 0.5s;
        }
      }
      .tag-height {
        height: 124px;
        // transform: translateY(0%);
        overflow: hidden;
        transition:height 0.5s;
      }
      .tag-more {
        height: auto;
        overflow: hidden;
        transition:height 0.5s;
      }
    }
  }
}

.customer-tab .client-area {
  margin: 0.625rem 0 0.625rem 0;
  background-color: #fff;
  padding: 0.9375rem 0.9375rem 0.75rem 0.9375rem;
}

.client-add {
  font-size: 0.625rem;
  line-height: 0.625rem;
  padding: 0.3125rem 0.6875rem 0.3125rem 0.625rem;
  color: #fff;
  background-color: #f14e4e;
  border-radius: 0.125rem;
  cursor: pointer;
}

.area-footer {
  margin-top: 0.5rem;

  .area-left {
    span {
      font-size: 0.6875rem;
      color: #666;
      line-height: 0.6875rem;
      margin-left: 0.4375rem;
    }
  }

  .area-right {
    min-width: 42px;
  }
}

.record {
  background-color: #fff;

  .record-tabs {
    border-bottom: 0.0625rem solid #f2f2f2;
  }
}

.record-content {
  margin: 0 0.9375rem;

  .record-time {
    width: 100%;
    margin-top: 1.125rem;

    h3 {
      text-align: left;
      font-size: 0.75rem;
      line-height: 0.75rem;
      font-weight: 400;
      color: #252525;
    }

    .time-head {
      width: 100%;
      margin-top: 0.9375rem;

      .time-head-left {
        margin-right: 0.75rem;

        .time-icon {
          min-width: 1.375rem;
          min-height: 1.375rem;
          // padding: 0.375rem 0.25rem;
          border-radius: 50%;
          // color: #7cc97a;
          // background-color: #e0f4e4;
          .iconfont {
            min-width: 1.375rem;
            min-height: 1.375rem;
            // padding: 0.375rem 0.25rem;
            border-radius: 50%;
            font-size: 0.875rem;
            line-height: 0.875rem;
          }

          .icon-card_phone {
            color: #7cc97a;
          }
          // .icon-fontclass-jilu3 {
          //   color: #a480dc;
          //   background-color: #f0ebf9;
          // }
        }

        .icon-fontclass-jilu3,
        .icon-zx_map_tel {
          color: #7cc97a;
          background-color: #e0f4e4;
        }

        .icon-fontclass-rengezhongxin {
          color: #a480dc;
          background-color: #f3edfe;
        }

        .icon-ht_content_apply {
          color: #a1c3f7;
          background-color: #f3edfe;
        }
      }

      .time-head-right {
        flex: 2;

        .time-title {
          font-size: 0.875rem;
          line-height: 0.875rem;
          font-weight: bold;
          color: #333;
        }

        .get-time {
          font-size: 0.625rem;
          line-height: 0.625rem;
          color: #666;
        }
      }
    }

    .time-content {
      margin-top: 0.4375rem;

      .timeline-left {
        width: 1.375rem;
        margin-right: 0.75rem;

        .timeline {
          width: 0.0625rem;
          height: 100%;
          background: #d4d4d4;
        }
      }

      .timeline-right {
        flex: 2;
        // align-items: flex-start;
        text-align: left;

        .timeline-phone {
          font-size: 0.75rem;
          line-height: 0.75rem;
          color: #252525;

          span {
            color: #666;
          }
        }

        .record-msg {
          font-size: 0.6875rem;
          padding: 0.25rem 0.375rem 0.3125rem 0.4375rem;
          background: #f4f4f4;
          border-radius: 0.125rem;

          span {
            padding: 0 0 0 0.375rem;
            color: #252525;
          }

          .msg-title {
            color: #666;
            padding: 0;
          }
        }

        .record-mian {
          display: inline-block;
          text-align: left;
          margin: 0.75rem 0 0.6875rem 0;
          border-radius: 0.125rem;

          .accessory-list {
            background: #f4f4f4;
            padding: 0.25rem 0.375rem 0.625rem 0.4375rem;
            flex-wrap: wrap;

            p {
              font-size: 0.6875rem;
              color: #252525;
              padding: 0 0.375rem 0 0;
            }

            .accessory-img {
              margin: 0 0.875rem 0 0;
              position: relative;

              img {
                width: 3rem;
                height: 3rem;
              }

              .icon-adsystem_icon_cancle {
                position: absolute;
                right: 0;
                top: 0;
                transform: translate(40%, -40%);
              }
            }

            .accessory-file {
              padding: 0.625rem 0 0 0;
              flex-wrap: wrap;

              .name {
                font-size: 0.6875rem;
                color: #666;
              }

              img {
                width: 1.25rem;
                height: 1.25rem;
                margin: 0;
              }

              .el-icon-download {
                padding: 0 0 0 0.375rem;
              }

              .icon-fontclass-wenzhang {
                color: #666;
                padding: 0 0.25rem 0 0;
                font-size: 0.875rem;
                line-height: 0.875rem;
              }

              .icon-adsystem_icon_cancle {
                padding: 0 0 0 0.75rem;
              }
            }
          }
        }
      }
    }
  }
}

.accessory {
  width: 16.5625rem;
  height: 16.5625rem;
  background: #fff;
  position: relative;
  border-radius: 0.125rem;
  // background-size: cover;
  background-size: 100% 100%;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.accessory-down {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5002;

  img {
    width: 1.8125rem;
    height: 1.8125rem;
  }
}

.client-details {
  .client-name {
    background-color: #fff;

    .icon-fontclass-xinghao {
      font-size: 0.5rem;
      padding: 0 0.25rem 0 0;
      color: #f14e4e;
    }

    span {
      width: 5.625rem;
      min-width: 5.625rem;
      padding: 0 0 0 1rem;
    }
  }

  .client-btn {
    margin: 1.25rem;
    padding: 0.5625rem 1.75rem;
    font-size: 0.6875rem;
    border-radius: 6px;
    color: #fff;
    background-color: #f14e4e;
  }
}

.department-main {
  padding: 1.3125rem 0.75rem 0 0.9375rem;

  .head {
    margin-bottom: 1.375rem;

    .cancel {
      font-size: 0.75rem;
      line-height: 0.75rem;
      color: #aaaab3;
    }

    .department-title {
      font-size: 1rem;
      line-height: 1rem;
      font-weight: 500;
      color: #3b3b4a;
    }

    .affirm {
      font-size: 0.75rem;
      line-height: 0.75rem;
    }
  }

  .content-time-stair {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .time-stair {
    width: 100%;
    padding: 0 0 1.75rem 0;
    position: relative;
  }

  .content-time,
  .time-stair {
    width: 100%;
    padding: 0 0 1.75rem 0;
    position: relative;

    &::after {
      content: "";
      width: 0.0625rem;
      height: 100%;
      position: absolute;
      top: 0.375rem;
      left: 3.5008px;
      background-color: #f14e4e;
    }

    .time-left {
      .time-icon {
        width: 0.4375rem;
        height: 0.4375rem;
        background: #f14e4e;
        border-radius: 50%;
        margin-right: 0.625rem;
      }

      p {
        font-size: 0.75rem;
        line-height: 0.75rem;
      }
    }
  }

  .select {
    .time-left {
      color: #f14e4e;
    }
  }

  .department-children {
    border-top: 0.0625rem solid #f0f0f1;

    .department-title {
      font-size: 0.9375rem;
      line-height: 0.9375rem;
      color: #3b3b4a;
      margin: 0.9375rem 0 1.25rem 0.25rem;
      text-align: left;
    }

    .children-main {
      height: 12.5rem;
      overflow-y: scroll;

      .children-item {
        font-size: 0.75rem;
        line-height: 0.75rem;
        margin-bottom: 1.4375rem;
      }

      .on {
        color: #f14e4e;
      }
    }
  }
}

.header-cascader {
  width: 100%;
  font-size: 0.875rem;
}
</style>
